<!DOCTYPE html>
<html lang="zn">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>京东放大镜</title>
  <style>
    .box {
      width: 450px;
      height: 450px;
      border: 1px solid #ccc;
      float: left;
      /*设置浮动使得两个盒子在一排显示*/
      position: relative;
      /*设置定位 根据自身情况可以改为绝对定位 */
      margin: 10px;
    }

    .box_img {
      width: 100%;
      height: 100%;
    }

    .big {
      width: 600px;
      height: 600px;
      overflow: hidden;
      /*超出部分隐藏*/
      border: 1px solid #ccc;
      position: relative;
      /*设置定位 根据自身情况可以改为绝对定位 */
      display: none;
      /*默认不显示 鼠标经过box时显示*/
    }

    .mask {
      width: 300px;
      height: 300px;
      background-color: yellow;
      position: absolute;
      /*在box类里面定位 层级高于展示图*/
      top: 0px;
      left: 0px;
      opacity: .5;
      /*设置遮罩层的透明度*/
      cursor: move;
      /*鼠标经过的时候变成十字拖动样式*/
      display: none;
      /*默认不显示 鼠标经过box时显示*/
    }

    .img {
      position: absolute;
      /*在big盒子里面绝对定位*/
      /*JavaScript需要赋值需要设置top和left值*/
      top: 0px;
      left: 0px;

    }
  </style>
</head>

<body>
  <div class="box">
    <img class="box_img" src="./mate60.png" alt="">
    <div class="mask"></div>
  </div>

  <div class="big">
    <img src="./mate60.png" alt="" class="img">
  </div>

  <script>
    var mask = document.querySelector('.mask');
    var box = document.querySelector('.box');
    var big = document.querySelector('.big');
    var img = document.querySelector('.img');

    box.addEventListener('mouseover', function () {
      mask.style.display = 'block';
      big.style.display = 'block';

    });

    box.addEventListener('mouseout', function () {
      mask.style.display = 'none';
      big.style.display = 'none';
    });

    box.addEventListener('mousemove', function (e) {

      //得到的x和y是鼠标在盒子内的坐标  this指向box
      var x = e.pageX - this.offsetLeft;
      var y = e.pageY - this.offsetTop;

      //将获取到的鼠标的值给遮罩层（减去一半是因为让鼠标在遮罩层中央） 让它跟着鼠标移动
      var maskX = x - mask.offsetWidth / 2;
      var maskY = y - mask.offsetHeight / 2;


      //设置最大移动距离
      var maskWidth = box.offsetWidth - mask.offsetWidth;
      var maskHeight = box.offsetHeight - mask.offsetHeight;
      //控制mask移动的范围
      if (maskX <= 0) {
        maskX = 0;
      } else if (maskX >= maskWidth) {
        maskX = maskWidth;
      }

      if (maskY <= 0) {
        maskY = 0;
      } else if (maskY >= maskHeight) {
        maskY = maskHeight;
      }
      mask.style.left = maskX + 'px';
      mask.style.top = maskY + 'px';

      //大图最大移动距离
      var imgWidth = img.offsetWidth - big.offsetWidth;
      var imgHeight = img.offsetHeight - big.offsetHeight;

      //大图片的移动距离 = mask移动距离 * 大图最大移动距离 /mask的最大移动距离  
      var bigX = maskX * imgWidth / maskWidth;
      var bigY = maskY * imgHeight / maskHeight;

      //赋值
      img.style.left = (-bigX) + 'px';
      img.style.top = (-bigY) + 'px';

    });

  </script>


</body>

</html>